/*
  学习目标：生命周期-更新阶段
  触发更新阶段:
    1. setState调用
    2. props值改变
  钩子函数:
    1. render:  再次渲染
    2. componentDidUpdate:  类似vue2中 updated
  注意: 
   1. 💥 更新阶段的钩子函数内, 不能调用setState, 否则死循环
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    count: 0,
  };

  // 作用: 可以获取更新后的数据,  再次渲染, 更新dom
  render() {
    const { count } = this.state;

    // 💥 更新阶段的钩子函数内, 不能调用setState, 否则死循环
    this.setState({ count: count + 1 });

    return (
      <>
        <Child count={count}></Child>
        <div>App - {count}</div>
        <button onClick={() => this.setState({ count: count + 1 })}>+1</button>
      </>
    );
  }
}

class Child extends React.Component {
  render() {
    console.log('render执行了  ----->  count', this.props.count);
    return <div>Child</div>;
  }

  // 场景: 类似vue中watch , 做监听, 做缓存
  componentDidUpdate() {
    console.log('componentDidUpdate执行了  ----->  count,', this.props.count);
  }
}
